<template>
  <view class="detail">
    <view class="head">
      <view class="left">
        <text class="title">{{ hpvInfo.name }}</text>
        <view class="list">
          <view class="list-item" v-for="(o, i) in hpvInfo.describe" :key="i">{{
            o
          }}</view>
        </view>
      </view>
      <view class="right">
        <text class="price"
          >￥{{ hpvInfo.price[0] }}-￥{{ hpvInfo.price[1] }}</text
        >
      </view>
    </view>
    <!-- 表单 -->
    <view class="form">
      <!-- 姓名 -->
      <view class="name">
        <text>姓名</text>
        <input type="text" v-model="hpvForm.name" placeholder="请输入姓名" />
      </view>
      <!-- 性别 -->
      <view class="name">
        <text>性别</text>
        <picker class="picker" mode="selector" @change="changeSex" :range="Sex">
          <view class="pick">
            <text>{{
              hpvForm.gender == "" ? "请选择性别" : hpvForm.gender
            }}</text>
          </view>
        </picker>
      </view>
      <!-- 出生日期 -->
      <view class="name">
        <text>出生日期</text>
        <picker class="picker" mode="date" @change="changeDate">
          <view class="pick">
            <text>{{
              hpvForm.born_date == "" ? "请选择出生日期" : hpvForm.born_date
            }}</text>
          </view>
        </picker>
      </view>
      <!-- 身份证 -->
      <view class="name">
        <text>身份证</text>
        <input
          type="number"
          v-model="hpvForm.id_card"
          placeholder="请输入身份证"
        />
      </view>
      <!-- 手机号 -->
      <view class="name">
        <text>手机号</text>
        <input
          type="number"
          v-model="hpvForm.phone"
          placeholder="请输入手机号"
        />
      </view>
    </view>
    <!-- 套餐名称和预计接种时间 -->
    <view class="time">
      <view class="date" v-for="(item, index) in hpvTC" :key="item._id">
        <text class="name">{{ item.title }}</text>
        <!-- 套餐名称 -->
        <view class="list">
          <view
            class="list-item"
            @click="changeName(o.combo, o.combo_id)"
            :class="{ Combo: combo == o.combo }"
            v-for="(o, i) in item.name"
            :key="i"
          >
            {{ o.combo }}
          </view>
        </view>
        <!-- 预计接种时间 -->
        <view class="list">
          <view
            class="list-item"
            @click="changeTime(o.time, o.time_id)"
            :class="{ Time: time == o.time }"
            v-for="(o, i) in item.name"
            :key="i"
          >
            {{ o.time }}
          </view>
        </view>
      </view>
    </view>
    <view class="kong"></view>
    <view class="footer">
      <view class="price">合计：￥{{ hpvForm.price }}</view>
      <button @click="submit">提交预约</button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
const hpvInfo = uni.getStorageSync("hpvDetail");
import { api } from "../../api/api";
import type { ReshpvT, ReshpvResT } from "../../types/type";
const hpvForm = reactive<ReshpvT>({
  name: "风筝在",
  id_card: "411726200311191971",
  gender: "女",
  born_date: "2003-11-9",
  phone: "17770954624",
  combo: "",
  ino_time: "",
  price: 0,
  hpv_name: hpvInfo.name,
});
const Sex = reactive(["男", "女"]);
const hpvTC = ref<ReshpvResT[]>([]);
const getList = async () => {
  const res: any = await api.hpv_pack();
  console.log(res);
  hpvTC.value = res.data;
};
onMounted(() => {
  getList();
});
const changeSex = (e: any) => {
  hpvForm.gender = Sex[e.detail.value];
};
const changeDate = (e: any) => {
  hpvForm.born_date = e.detail.value;
};
// 套餐名称
const combo = ref<string>("");
const time = ref<string>("");
const time_id = ref<string>("");
const combo_id: any = ref("");
// const price = ref<number>(0);
const changeName = async (name: any, _id: string) => {
  combo.value = name;
  combo_id.value = _id;
  hpvForm.combo = name;
  if (time.value == "") {
    uni.showToast({
      title: "请选择预计接种时间",
      icon: "none",
    });
  } else {
    const res: any = await api.hpv_price({
      combo_id: combo_id.value,
      hpv_id: hpvInfo._id,
      time_id: time_id.value,
    });
    // price.value = res.data[0].price;
    hpvForm.price = res.data[0].price;
  }
};

// 预计接种时间

const changeTime = async (timeValue: any, _id: string) => {
  time.value = timeValue;
  time_id.value = _id;
  hpvForm.ino_time = timeValue;
  if (time.value == "") {
    uni.showToast({
      title: "请选择套餐名称",
      icon: "none",
    });
  } else {
    const res: any = await api.hpv_price({
      combo_id: combo_id.value,
      hpv_id: hpvInfo._id,
      time_id: time_id.value,
    });
    // price.value = res.data[0].price;
    hpvForm.price = res.data[0].price;
  }
};
// 提交预约
const submit = async () => {
  console.log(hpvForm);
  const res: any = await api.reshpv(hpvForm);
  console.log(res);
  if (res.msg == "提交成功") {
    uni.showToast({
      title: "提交成功",
      icon: "none",
    });
    setTimeout(() => {
      uni.navigateTo({
        url: "/navPage/hpvList/hpvList",
      });
    }, 1000);
  }
};
</script>

<style lang="scss" scoped>
.detail {
  width: 100vw;
  height: 100vh;
  background-color: #fafafa;
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    height: 200rpx;
    background-color: #fff;
    justify-content: space-between;
    view.price {
      width: 250rpx;
      text-align: center;
      color: #f00;
      font-weight: 600;
    }
    button:last-child {
      background-color: #2c76ef;
      color: #fff;
      width: 250rpx;
    }
  }
  .kong {
    height: 250rpx;
  }
  .Combo {
    background-color: #0176ff !important;
    color: #fff;
  }
  .Time {
    background-color: #0176ff !important;
    color: #fff;
  }
  .head {
    background-color: #fff;
    width: 100%;
    padding: 15rpx 25rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    .title {
      font-weight: 600;
      font-size: 35rpx;
    }
    .price {
      font-weight: 600;
      font-size: 30rpx;
      color: #f00;
    }
  }
  .list {
    display: flex;
    align-items: center;
    margin: 10rpx;
    .list-item {
      padding: 10rpx;
      background-color: #f7f7f7;
      margin-right: 10rpx;
      border-radius: 10rpx;
    }
  }
  .time {
    width: 100%;
    // height: 80rpx;
    background-color: #fff;
    padding: 30rpx 20rpx;
    box-sizing: border-box;
    .name {
      font-weight: 600;
    }
  }
}
.form {
  width: 100%;
  // height: 500rpx;
  margin: 20rpx 0;
  background-color: #fff;
  padding: 0 10rpx;
  box-sizing: border-box;
  .name {
    display: flex;
    align-items: center;
    padding: 40rpx 10rpx;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
    input {
      flex: 1;
      text-align: right;
    }
  }
  .picker {
    flex: 1;
    text-align: right;
  }
  .name:last-child {
    border: 0;
  }
}
</style>
